<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      class="query-form"
      :model="queryParams"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="设备名称" prop="equName">
        <el-input
          v-model="queryParams.equName"
          placeholder="请输入设备名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
        <el-button size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
      <!-- <el-form-item style="float:right;">
        <el-button type="primary" size="small" @click="openIntelligentControl">智能控制</el-button>
      </el-form-item> -->
    </el-form>
    <Scrollbar class="content-container" style="background-color: #F2F3F5;">
      <!-- <el-card v-for="key in Object.keys(equList)" :key="key" class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>{{ equList[key][0].locationName }}（{{ equList[key][0].direction }}）</span>
        </div> -->
      <DeviceCard
        v-for="item in equList"
        :key="item.id"
        :info="item"
        style="margin-bottom: 20px;"
        @success="getList"
      />
      <!-- </el-card> -->
    </Scrollbar>
  </div>
</template>

<script>
import DeviceCard from './components/DeviceCard'
// import DeviceCard1 from './components/DeviceCard1'
// import SingleControl from './components/Control.vue'
// import Details from './components/Details.vue'
// import IntelligentControl from './components/IntelligentControl.vue'
import { listUps } from '@/api/fjgs/ups'
import Scrollbar from '@/components/Scrollbar'
// import { number } from 'echarts'
import { groupBy } from 'loadsh'

export default {
  name: 'Equ',
  components: {
    DeviceCard,
    // DeviceCard1,
    Scrollbar
    // IntelligentControl,
    // SingleControl,
    // Details
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备定义表格数据
      equList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equType: 3
      },
      // 表单参数
      form: {
        status: undefined,
        illuminance: null
      },
      // 表单校验
      rules: {
      },
      form1: {},
      timerr: null
    }
  },
  created() {
    this.getList()
    this.loopDeviceDetails()
  },
  beforeDestroy() {
    clearTimeout(this.timerr)
  },
  methods: {
    loopDeviceDetails() {
      const _this = this
      this.timerr = setTimeout(() => {
        _this.getList().finally(() => {
          _this.loopDeviceDetails()
        })
      }, 30000)
    },
    /** 查询设备定义列表 */
    async getList() {
      this.loading = true
      return await listUps(this.queryParams).then(response => {
        console.log(response)
        this.equList = response.rows // groupBy(response.rows, 'locationId')
        // this.total = response.total
        // this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    }
    // handleView(row) {
    //   this.$refs.Details.handleView(row)
    // },
    // handleControl(row) {
    //   this.$refs.control.open(row)
    // }
  }
}
</script>

  <style lang="scss" scoped>

  .box-card {
    margin-bottom: 20px;
    border: none;
    &::v-deep .el-card__header{
      border-bottom: none;
    }
  }
  </style>

